<template>
  <div class="change-class body-bg">
    <div v-if="!initLoading">
      <!-- top -->
      <div class="activity-top">
        <p class="baoming-state">{{activitDetail.state == "1" ? "报名中" : "已报名"}}</p>
        <div class="activity-top-m">
          <img class="activity-img" :src="activitDetail.activityImg" alt="活动图片">
          <p class="activity-name overflow-tow">{{activitDetail.activityName}}</p>
        </div>
        <ul class="activity-top-b">
          <li>活动时间：{{activitDetail.activityDateTime}}</li>
          <li class="address">活动地点：{{activitDetail.activityAddress}}</li>
        </ul>
      </div>
      <!-- 赛事简介 -->
      <div class="activity-infor">
        <p class="activity-title border-bottom"><img class="activity-icon1" src="/static/images/activity/activity-icon1.png" alt=""> 赛事简介</p>
        <div class="activity-text" v-html="activitDetail.content"></div>
      </div>
      <!-- 报名按钮 -->
      <div class="submit-btn" @click="submit">立即报名</div>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
import store from '../../store/globalStore'
export default {
  data() {
    return {
      initLoading: true, // 初始加载
      activitDetail: {
        isReading: 1,
        state: 1,
        activityImg: "https://img.yzcdn.cn/vant/cat.jpeg",
        activityName: "活动课程名称活动课程名称课程活动课程名称活动课程名称课程活动课程名称活动课程名称课程活动课",
        activityDateTime: "2019.10.22-2019.11.20",
        activityAddress: "知春路校区",
        content: "<p>活动详情介绍</p>"
      }
    }
  },
  onShow() {
    this.getShiftWorkList();
  },
  methods: {
    // 获取列表
    getShiftWorkList() {
      this.$fetch.shiftWork()
      .then(res=>{
        this.initLoading = false;
      }).catch(err=>{
        this.initLoading = false;
      })
    },
    // 报名
    submit() {
      if(this.activitDetail.isReading == "2"){ // 判断是否为在读学员
        wx.showToast({
          title: '该活动仅支持在读学员报名快来报名上课吧~',
          icon: 'none'
        })
        return;
      } 
      wx.showToast({
        title: '报名成功',
        icon: 'none',
        success: function() {
          setTimeout(() => {
            wx.navigateTo({
              url: '/pages/activityRecord/main',
            })
          }, 1500);
        }
      })
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  height: 100vh;
  padding: 0 14px;
  box-sizing: border-box;
  overflow: hidden;
  // top
  .activity-top{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 16px 24px 24px 30px;
    box-sizing: border-box;
    box-shadow: 0px 8px 10px 3px rgba(37,105,255,0.1);
    border-radius: 12px;
    margin-top: 16px;
    overflow: hidden;
    background:linear-gradient(90deg,rgba(0,183,238,1) 0%,rgba(0,171,222,1) 100%);
    .baoming-state{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 55px;
      height: 16px;
      border-radius: 10px;
      background: #1BD1FF;
      font-size: 12px;
      color: #fff;
    }
    .activity-top-m{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 8px 0 14px 0;
      .activity-img{
        min-width: 52px;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        margin-right: 10px;
        display: block;
      }
      .activity-name{
        flex-grow: 1;
        font-size: 16px;
        color: #fff;
        font-weight: bold;
      }
    }
    .activity-top-b{
      width: 100%;
      font-size: 12px;
      color: #fff;
      .address{
        margin-top: 6px;
      }
    }
  }
  // 赛事简介
  .activity-infor{
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    margin-top: 20px;
    margin-bottom: 18px;
    .activity-title{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 48px;
      font-size: 16px;
      color: #333;
      font-weight: bold;
      .activity-icon1{
        width: 14px;
        height: 14px;
        display: block;
        margin: 0 12px 0 12px;
      }
    }
    .activity-text{
      width: 100%;
      padding: 10px 6px;
      box-sizing: border-box;
    }
    
  }
  .submit-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    background:rgba(0,184,238,1);
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
  }
}
</style>
